<template>
	<!-- 新增任务点 -->
	<view class="add_dot" :class="addTaskDotFlag?'line_show':'line_hide'">
		<view class="help_head">
			<view class="head_top" :style="{height: statusBarHeight}"></view>
			<view class="head_content" >
				<view class="head_image no_show" >
					<image src="/static/images/back.png" mode="aspectFit"></image>
				</view>
				<view class="help_title f50">
					新增任务点
				</view>
				<view class="head_image"   @tap="tapLeft">
					<image src="/static/images/close02.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<view class="show">
			<picker mode="selector" @change="changeType" :value="typeIndex" :range="typeArr">
				<view class="item">
					<view class="item_left">
						边坡类型
					</view>
					<view class="item_right">
						<input type="text" v-model="slopeType" :disabled="true" maxlength="218" placeholder="请请选择边坡类型" />
					</view>
				</view>
				
			</picker>
			
			<view class="item">
				<view class="item_left">
					桩号
				</view>
				<view class="item_right">
					<input type="text" v-model="dotNum" maxlength="218" placeholder="请输入桩号" />
				</view>
			</view>
			
			<view class="item">
				<view class="item_left">
					边坡编号
				</view>
				<view class="item_right">
					<input type="text" v-model="slopeNum" maxlength="218" placeholder="请输入边坡编号" />
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_item foot_left" @tap="tapLeft">
				取消
			</view>
			<view class="foot_item foot_sure" @tap="tapSure">
				确定
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'AddDot',
		props: {
			addTaskDotFlag: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				statusBarHeight: '25rpx',
				dotNum: '',
				slopeNum: '',
				
				slopeType: '',
				typeIndex: -1,
				typeArr: [1,2,3,4,5],
				
				// 边坡原始数组
				sideLists: [],
				
				// 是否可点击或请求 
				tapFlag: true
			}
		},
		watch: {
			addTaskDotFlag(news) {
				// if(news) {
				// 	this.getSide()
				// }
			}
		},
		created() {
			this.getStatusHeight()
		},
		methods: {
			/**
			 * 获取边坡类型
			 */
			getSide(slopeInfo) {
				uni.showLoading({
					title: '正在获取边坡类型',
					mask: true
				})
				let url = '';
				let data = {
					method: 'getSlopeType',
					pageCurrent: 1,
					pageSize: 10
				}
				let that = this;
				this.$requestP(url, data, res=>{
					try {
						let list = res.data.data.slopeTypeList;
						let arr = [];
						let typeLists = [];
						for(let i =0; i<list.length; i++){
							arr.unshift(list[i].name)
							typeLists.unshift((list[i]))
						}
						
						that.typeArr = arr;
						that.sideLists = typeLists;
						
						uni.hideLoading()
					} catch(e) {
						uni.hideLoading()
					}
					
				}, err=>{
					if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							mask: true
						})
					}else{
						uni.hideLoading()
					}
				}, () => {
					
				}, resErr=>{
					if(resErr.msg){
						uni.showToast({
							title: resErr.msg,
							icon: 'none',
							mask: true
						})
					}else{
						uni.hideLoading()
					}
				})
			},
			
			/**
			 * 边坡类型选择改变
			 */
			changeType(e) {
				console.log('边坡类型选择改变', e)
				let index = e.detail.value;
				if(index< 0) {
					index = 0
				}
				this.typeIndex = index;
				this.slopeType = this.typeArr[index];
				
			},
			
			/**
			 * 点击确定
			 */
			tapSure() {
				this.$emit('successAddDot', 1)
				return;
				console.log('新增任务点 点击确定', this.tapFlag)
				let that = this;
				// if(this.tapFlag) {
				// 	this.tapFlag = false
				// }else {
				// 	return;
				// }
				if(this.typeIndex<0) {
					uni.showToast({
						title: '请选择边坡类型',
						icon: 'none',
						mask: true
					})
					this.tapFlag = true;
					return;
				}
				if(!this.dotNum){
					uni.showToast({
						title: '桩号不能空',
						icon: 'none',
						mask: true
					})
					this.tapFlag = true;
					return;
				}
				if(!this.slopeNum) {
					uni.showToast({
						title: '边坡编号不能为空',
						icon: 'none',
						mask: true
					})
					this.tapFlag = true;
					return;
				}
				if(!this.lineId) {
					uni.showToast({
						title: '请先选择线路后才能新增边坡点',
						icon: 'none',
						mask: true
					})
					this.tapFlag = true;
					return;
				}
				
				uni.showLoading({
					title: '正在提交数据',
					mask: true
				})
				let url = "?method=createSlope";
				// mileageStation、slopeNumber、lineId>0、slopeTypeId
				let data = {
					method: 'createSlope',
					Slope: {
						mileageStation: this.dotNum,
						slopeNumber: this.slopeNum,
						lineId: this.lineId,
						slopeTypeId: this.sideLists[this.typeIndex].id
					}
				}
				
				this.$requestP(url, data, res=>{
					uni.showToast({
						title: '新增线路成功',
						icon: 'success',
						mask: true,
						success() {
							that.tapFlag = true;
							setTimeout(()=>{
								that.$emit('successAddDot', 1)
							}, 1500)
						}
					})
					
				}, err=>{
					that.tapFlag = true;
					if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							mask: true
						})
					}else{
						uni.hideLoading()
					}
					
				}, () => {
					
				}, resErr => {
					that.tapFlag = true;
					// console.log('res err', that.tapFlag, resErr)
					if(resErr.msg){
						uni.showToast({
							title: resErr.msg,
							icon: 'none',
							mask: true
						})
					}else{
						uni.hideLoading()
					}
					
				})
			},
			
			/**
			 * 获取状态栏高度
			 */
			getStatusHeight() {
				let that = this;
				uni.getSystemInfo({
				    success: function (res) {
						// console.log('获取系统信息成功', res)
				        let statusBarHeight = res.statusBarHeight + 'px';
						that.statusBarHeight = statusBarHeight || '25rpx';
				    }
				});
			},
			
			/**
			 * 点击关闭
			 */
			tapLeft() {
				this.$emit('closeAddDot', 1)
			}
		}
	}
</script>

<style lang="scss">
	page{
		
		background-color: #fff;
	}
	.add_dot{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		
		transform: translateX(100%);
		transition: all .3s ease-in-out;
		&.line_show{
			transform: translateX(0);
		}
		&.line_hide{
			transform: translateX(110%);
		}
		.show{
			padding: 90rpx 30rpx 30rpx;
		}
		.item{
			height: 75rpx;
			display: flex;
			border-bottom: 1px solid #DCDCDC;
			.item_left{
				width: 100rpx;
				height: 75rpx;
				line-height: 75rpx;
				font-size: 20rpx;
				color: #4A5260
			}
			.item_right{
				flex: 1;
				height: 75rpx;
				padding: 0 8rpx;
				input{
					height: 75rpx;
					width: 100%;
					padding: 0;
					margin: 0;
					border: 0;
					font-size: 20rpx;
				}
			}
		}
		.foot{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 20;
			width: 100%;
			padding: 15rpx 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			
			.foot_item{
				width: 45%;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 20rpx;
				color: #999;
				background-color: #d4d4d4;
				border-radius: 5rpx;
			}
			.foot_sure{
				color: #fff;
				background-color: #007AFF;
			}
			
		}
	}
	.help_head{
		// height: 90rpx;
		.head_top{
			height: 25rpx;
			background-color: #0D4483;
		}
		.head_content{
			height: 65rpx;
			border-bottom: 1px solid #dcdcdc;
			display: flex;
			background-color: #2579D8;
			.head_image{
				padding: 0 24rpx;
				height: 65rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.help_title{
				width: 594rpx;
				height: 65rpx;
				text-align: center;
				line-height: 65rpx;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
	.no_show{
		visibility: hidden;
	}
</style>
